<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no,viewport-fit=cover">
	    <meta name="apple-mobile-web-app-capable" content="yes">
	    <meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
<!--		<link rel="stylesheet" href="css/style.css" />-->
		<link rel="stylesheet" href="css/mui.min.css" />
		<link rel="stylesheet" href="css/report.css" />
		<script type="text/javascript" src="https://zeptojs.com/zepto.min.js" ></script>
		<script type="text/javascript" src="js/echarts.common.min.js" ></script>
		<script type="text/javascript" src="js/report.js" ></script>
	</head>
	<body>
	   <!--活跃情况-->
	   <div id="container" class="bff" style="height:21.0rem;"></div>
	   <!--每月活跃排行-->
	   <div id="activeList" class="bff mt8">
	   	<table cellpadding="0" cellspacing="0" width="100%" class="tableList">
	   		<thead>
	   			<tr>
	   				<th>日期</th>
	   				<th>全市排行</th>
	   				<th>活跃家长数</th>
	   				<th>活跃率</th>
	   			</tr>
	   		</thead>
	   		<tbody>
	   			<tr>
	   				<td>12月21号</td>
	   				<td>32</td>
	   				<td>143</td>
	   				<td>45.79%</td>
	   			</tr>
	   			<tr>
	   				<td>12月21号</td>
	   				<td>32</td>
	   				<td>143</td>
	   				<td>45.79%</td>
	   			</tr>
	   			<tr>
	   				<td>12月21号</td>
	   				<td>32</td>
	   				<td>143</td>
	   				<td>45.79%</td>
	   			</tr>
	   			<tr>
	   				<td>12月21号</td>
	   				<td>32</td>
	   				<td>143</td>
	   				<td>45.79%</td>
	   			</tr>
	   			<tr>
	   				<td>12月21号</td>
	   				<td>32</td>
	   				<td>143</td>
	   				<td>45.79%</td>
	   			</tr>
	   			<tr>
	   				<td>12月21号</td>
	   				<td>32</td>
	   				<td>143</td>
	   				<td>45.79%</td>
	   			</tr>
	   		</tbody>
	   	</table>
	   </div>
	   <!--班级使用情况-->
	   <div id="activationVs" class="bff mt8">
	   	 <div class="report-title"><strong>班级使用情况</strong><span class="mui-icon mui-icon-help"></span></div>
	     <div class="activationVs-schoolInfo">
	     	<div class="rank-text ov">
	     		当前班级全校排名第<strong class="num cf7">4</strong>,还需要<strong class="ntm cf7">14</strong>位家长激活就能超过前一名的班级
	     	</div>
	     	<div class="rank-imt ov">
	     		<ul class="myClassInfo">
	     			<li class="imt"><img src="images/img3.png"></li>
		     		<li class="rankNum">本校(27)</li>
		     		<li class="schoolName">学校名称</li>
	     		</ul>
	     		<ul><img src="images/icon_vs.png" style="width:4.0rem;"></ul>
	     		<ul class="rankClassInfo">
	     			<li class="imt"><img src="images/img3.png"></li>
		     		<li class="rankNum">县/区第1</li>
		     		<li class="schoolName">学校名称学校名称学校名称</li>
	     		</ul>
	     	</div>
	     	<div class="rank-num ov">
	     		<ul class="myClsss">
	     		  <li><span class="num tet">6</span></li>
	     		  <li><span class="num tet">7</span></li>
	     		  <li><span class="num tet">8</span></li>
	     		  <li><span class="num tet">9</span></li>
	     		</ul>
	     		<ul>
	     		  <li><span class="tet">未激活</span></li>
	     		  <li><span class="tet">激活1-2个家长</span></li>
	     		  <li><span class="tet">激活3个家长</span></li>
	     		  <li><span class="tet">激活4个及以上家长</span></li>
	     		</ul>
	     		<ul class="firstClass">
	     		  <li><span class="num tet">6</span></li>
	     		  <li><span class="num tet">7</span></li>
	     		  <li><span class="num tet">8</span></li>
	     		  <li><span class="num tet">9</span></li>
	     		</ul>
	     	</div>
	     </div>
	     <div class="activationVs-tix">
	     	<span class="tix-btn" onclick="tanc(4)"></span><span class="tix-jh">提醒学生家长激活</span>
	     </div>
	   </div>
	   <!--班级详情-->
	   <div id="list" class="bff mt8">
	   	<div class="list_tis">本班学生平均有<span class="bili cf7">1.78</span>个家长关注，目前全校排名第<span class="rank cf7">3</span>，还需要<span class="num cf7">13</span>名家长激活就能够超过上一名了。</div>
	   	<table cellpadding="0" cellspacing="0" width="100%" id="tableList">
	   		<thead>
	   			<tr class="title">
	   				<th><i class="bgray icon"></i>灰色</th>
	   				<th><i class="bred icon"></i>红色</th>
	   				<th><i class="borange icon"></i>橙色</th>
	   				<th><i class="bblue icon"></i>蓝色</th>
	   				<th><i class="bgreen icon"></i>绿色</th>
	   			</tr>
	   			<tr>
	   				<th><span class="cany1">0</span>人</th>
	   				<th><span class="cany2">13</span>人</th>
	   				<th><span class="cany3">0</span>人</th>
	   				<th><span class="cany4">0</span>人</th>
	   				<th><span class="cany5">0</span>人</th>
	   			</tr>
	   		</thead>
	   		<tbody>
	   			<tr>
		   			<td>
		   				<table class="tb1">
		   					<tr><td><span class="name">名字名字名字</span></td></tr>
		   					<tr><td><span class="name">名字名字名字</span></td></tr>
		   					<tr><td><span class="name">名字名字名字</span></td></tr>
		   					<tr><td><span class="name">名字名字名字</span></td></tr>
		   					<tr><td><span class="name">战三</span></td></tr>
		   					<tr><td><span class="name">王五</span></td></tr>
		   					<tr><td><span class="name">刘大拿</span></td></tr>
		   					<tr><td><span class="name">岳不群</span></td></tr>
		   				</table>
		   			</td>
		   			<td>
		   				<table class="tb2">
		   					<tr><td><span class="name">名字名字名字</span></td></tr>
		   					<tr><td><span class="name">名字名字名字</span></td></tr>
		   					<tr><td></td></tr>
		   					<tr><td></td></tr>
		   					<tr><td></td></tr>
		   					<tr><td></td></tr>
		   					<tr><td></td></tr>
		   					<tr><td></td></tr>
		   				</table>
		   			</td>
		   			<td>
		   				<table class="tb3">
		   					<tr><td><span class="name">名字名字名字</span></td></tr>
		   					<tr><td></td></tr>
		   					<tr><td></td></tr>
		   					<tr><td></td></tr>
		   					<tr><td></td></tr>
		   					<tr><td></td></tr>
		   					<tr><td></td></tr>
		   					<tr><td></td></tr>
		   				</table>
		   			</td>
		   			<td>
		   				<table class="tb4">
		   					<tr><td><span class="name">名字名字名字</span></td></tr>
		   					<tr><td><span class="name">名字名字名字</span></td></tr>
		   					<tr><td></td></tr>
		   					<tr><td></td></tr>
		   					<tr><td></td></tr>
		   					<tr><td></td></tr>
		   					<tr><td></td></tr>
		   					<tr><td></td></tr>
		   				</table>
		   			</td>
		   			<td>
		   				<table class="tb5">
		   					<tr><td><span class="name">名字名字名字</span></td></tr>
		   					<tr><td><span class="name">名字名字名字</span></td></tr>
		   					<tr><td></td></tr>
		   					<tr><td></td></tr>
		   					<tr><td></td></tr>
		   					<tr><td></td></tr>
		   					<tr><td></td></tr>
		   					<tr><td></td></tr>
		   				</table>
		   			</td>
		   		</tr>
	   		</tbody>
	   		<tfoot>
	   			<tr><td colspan="5">
	   				<span><i class="bgray icon"></i>未激活的学生</span>
	   				<span><i class="bred icon"></i>激活1个家长</span>
	   				<span><i class="borange icon"></i>激活2个家长</span>
	   				<span><i class="bblue icon"></i>激活3个家长</span>
	   				<span><i class="bgreen icon"></i>激活4个及以上家长</span>
	   			</td></tr>
	   		</tfoot>
	   	</table>
	   	<div class="list-btn tix-btn"><button type="button" class="mui-btn mui-btn-primary lh2">提醒老师发照片</button></div>
	   </div>
	   <!--学校使用情况-->
	   <div id="usageList" class="bff mt8 usageList">
	     <div class="report-title"><strong>学校使用情况</strong><span class="mui-icon mui-icon-help" onclick="tanc(1)"></span></div>
	     <ul class="mui-table-view reportList">
		    <li class="mui-table-view-cell reportLt">
		        <a class="mui-navigate-right">
		        	<div class="num">1</div>
		        	<div class="name">小段1班</div>
		        	<div class="attention">学生家长关注度:<span class="attention-num">3.35</span></div>
		        	<div class="attentionNum">
		        		<span class=""><i class="bgray icon"></i>1人</span>
		        		<span class=""><i class="bred icon"></i>7人</span>
		        		<span class=""><i class="borange icon"></i>19人</span>
		        		<span class=""><i class="bblue icon"></i>1人</span>
		        		<span class=""><i class="bgreen icon"></i>2人</span>
		        	</div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell reportLt">
		        <a class="mui-navigate-right">
		        	<div class="num">2</div>
		        	<div class="name">小段1班</div>
		        	<div class="attention">学生家长关注度:<span class="attention-num">3.35</span></div>
		        	<div class="attentionNum">
		        		<span class=""><i class="bgray icon"></i>1人</span>
		        		<span class=""><i class="bred icon"></i>7人</span>
		        		<span class=""><i class="borange icon"></i>19人</span>
		        		<span class=""><i class="bblue icon"></i>1人</span>
		        		<span class=""><i class="bgreen icon"></i>2人</span>
		        	</div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell reportLt">
		        <a class="mui-navigate-right">
		        	<div class="num">3</div>
		        	<div class="name">小段1班</div>
		        	<div class="attention">学生家长关注度:<span class="attention-num c4a">2.38</span></div>
		        	<div class="attentionNum">
		        		<span class=""><i class="bgray icon"></i>1人</span>
		        		<span class=""><i class="bred icon"></i>7人</span>
		        		<span class=""><i class="borange icon"></i>19人</span>
		        		<span class=""><i class="bblue icon"></i>1人</span>
		        		<span class=""><i class="bgreen icon"></i>2人</span>
		        	</div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell reportLt">
		        <a class="mui-navigate-right">
		        	<div class="num">4</div>
		        	<div class="name">小段1班</div>
		        	<div class="attention">学生家长关注度:<span class="attention-num">3.35</span></div>
		        	<div class="attentionNum">
		        		<span class=""><i class="bgray icon"></i>1人</span>
		        		<span class=""><i class="bred icon"></i>7人</span>
		        		<span class=""><i class="borange icon"></i>19人</span>
		        		<span class=""><i class="bblue icon"></i>1人</span>
		        		<span class=""><i class="bgreen icon"></i>2人</span>
		        	</div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell reportLt">
		        <a class="mui-navigate-right">
		        	<div class="num">5</div>
		        	<div class="name">小段1班</div>
		        	<div class="attention">学生家长关注度:<span class="attention-num cf7">1.97</span></div>
		        	<div class="attentionNum">
		        		<span class=""><i class="bgray icon"></i>1人</span>
		        		<span class=""><i class="bred icon"></i>7人</span>
		        		<span class=""><i class="borange icon"></i>19人</span>
		        		<span class=""><i class="bblue icon"></i>1人</span>
		        		<span class=""><i class="bgreen icon"></i>2人</span>
		        	</div>
		        </a>
		    </li>
		</ul>
		<div class="photoList-tis">注：排名较低的班级务必尽快邀请更多家长关注，提升排名</div>
		<div class="usageList-btn tix-btn"><button type="button" class="mui-btn mui-btn-primary lh2">提醒老师邀请家长使用</button></div>
	   </div>
	   <!--相册发布情况-->
	   <div id="photoList" class="bff mt8">
	   	 <div class="report-title">请确保每个家长能够看到自己孩子的照片哦</div>
	     <table cellpadding="0" cellspacing="0" width="100%" class="reportList tableList">
	     	<thead>
	     		<tr>
	     			<th>排名</th>
		     		<th>班级</th>
		     		<th>人均(张)</th>
		     		<th>照片(张)</th>
		     		<th>浏览数</th>
	     		</tr>
	     	</thead>
	     	<tbody>
	     		<tr class="reportLt">
	     			<td><span class="num">1</span></td>
	     			<td><span class="classGrade">小班3班</span></td>
	     			<td><span class="capitaPhoto">1.28</span></td>
	     			<td><span class="totalPhoto">67</span></td>
	     			<td><span class="browseNum">43</span></td>
	     		</tr>
	     		<tr class="reportLt">
	     			<td><span class="num">2</span></td>
	     			<td><span class="classGrade">小班3班</span></td>
	     			<td><span class="capitaPhoto">1.28</span></td>
	     			<td><span class="totalPhoto">67</span></td>
	     			<td><span class="browseNum">43</span></td>
	     		</tr>
	     		<tr class="reportLt">
	     			<td><span class="num">3</span></td>
	     			<td><span class="classGrade">小班3班</span></td>
	     			<td><span class="capitaPhoto">1.28</span></td>
	     			<td><span class="totalPhoto">67</span></td>
	     			<td><span class="browseNum">43</span></td>
	     		</tr>
	     		<tr class="reportLt">
	     			<td><span class="num">4</span></td>
	     			<td><span class="classGrade">小班3班</span></td>
	     			<td><span class="capitaPhoto">1.28</span></td>
	     			<td><span class="totalPhoto">67</span></td>
	     			<td><span class="browseNum">43</span></td>
	     		</tr>
	     		<tr class="reportLt">
	     			<td><span class="num">5</span></td>
	     			<td><span class="classGrade">小班3班</span></td>
	     			<td><span class="capitaPhoto">1.28</span></td>
	     			<td><span class="totalPhoto">67</span></td>
	     			<td><span class="browseNum">43</span></td>
	     		</tr>
	     		<tr class="reportNone">
	     			<td><span class="noneIcon"></span></td>
	     			<td colspan="3">
	     				<div class="classGrade">大班大3班</div>
	     				<div class="time">最近发布时间:2018-12-21</div>
	     			</td>
	     			<td><button type="button" class="mui-btn mui-btn-primary">提醒</button></td>
	     		</tr>
	     		<tr class="reportNone">
	     			<td><span class="noneIcon"></span></td>
	     			<td colspan="3">
	     				<div class="classGrade">大班大3班</div>
	     				<div class="time">最近发布时间:2018-12-21</div>
	     			</td>
	     			<td><button type="button" class="mui-btn mui-btn-primary">提醒</button></td>
	     		</tr>
	     	</tbody>
	     </table>
	     <div class="photoList-tis">统计数据截止于2018-10-22 23:59:59</div>
	     <div class="tix-btn"><button type="button" class="mui-btn mui-btn-primary lh2">提醒老师发照片</button></div>
	   </div>
	   <!--上周相册发布情况排行-->
	   <!--<div id="photoRankingOut" class="bff mt8">
	     <div class="report-title"><strong>上周相册发布情况</strong></div>
	     <div class="RankingOutList">
	     	<div class="photoRanking-title"><span class="teacherName cf7">[教师名字]、[教师名字]、[教师名字]</span>内容内容内容内容</div>
	     	<ul class="photoRanking-list">
		     	<li>
		     		<div class="list-imt"><img src="images/img1.png"></div>
		     		<div class="list-content">
		     			<div class="icon">11</div>
		     			<div class="name">刘庆伟</div>
		     			<div class="text">发布了78张照片，记录下了孩子的每一个瞬间</div>
		     		</div>
		     	</li>
		     	<li>
		     		<div class="list-imt"><img src="images/img1.png"></div>
		     		<div class="list-content">
		     			<div class="icon">11</div>
		     			<div class="name">刘庆伟</div>
		     			<div class="text">发布了78张照片，记录下了孩子的每一个瞬间</div>
		     		</div>
		     	</li>
		     	<li>
		     		<div class="list-imt"><img src="images/img1.png"></div>
		     		<div class="list-content">
		     			<div class="icon">11</div>
		     			<div class="name">刘庆伟</div>
		     			<div class="text">发布了78张照片，记录下了孩子的每一个瞬间</div>
		     		</div>
		     	</li>
		     </ul>
	     </div>
	   </div>-->
	   <!--相册发布排行前几名展示-->
	   <div id="photoRanking" class="bff mt8">
	     <div class="photoRanking-title"><span class="teacherName cf7">[教师名字]、[教师名字]、[教师名字]</span>内容内容内容内容</div>
	     <ul class="photoRanking-list">
	     	<li>
	     		<div class="list-imt"><img src="images/img1.png"></div>
	     		<div class="list-content">
	     			<div class="icon">11</div>
	     			<div class="name">刘庆伟</div>
	     			<div class="text">发布了78张照片，记录下了孩子的每一个瞬间</div>
	     		</div>
	     	</li>
	     	<li>
	     		<div class="list-imt"><img src="images/img1.png"></div>
	     		<div class="list-content">
	     			<div class="icon">11</div>
	     			<div class="name">刘庆伟</div>
	     			<div class="text">发布了78张照片，记录下了孩子的每一个瞬间</div>
	     		</div>
	     	</li>
	     	<li>
	     		<div class="list-imt"><img src="images/img1.png"></div>
	     		<div class="list-content">
	     			<div class="icon">11</div>
	     			<div class="name">刘庆伟</div>
	     			<div class="text">发布了78张照片，记录下了孩子的每一个瞬间</div>
	     		</div>
	     	</li>
	     </ul>
	     <div class="photoRanking-tis">注:以上数据排名，截止[当周日日期]24小时</div>
	   </div>
	   <!--学校活跃情况-->
	   <div id="activeSchool" class="bff mt8 ov">
	   	 <div class="report-title"><strong>学校活跃情况</strong><span class="mui-icon mui-icon-help" onclick="tanc(2)"></span></div>
	     <div class="activeSchoolInfo ov mui-table-view-cell">
	     	<div class="fl schoolInfo-num">
	     		<div class="numTop flow">31</div>
	     		<div class="numText">本月全市日均<br />活跃排名</div>
	     	</div>
	     	<div class="fr schoolInfo-text mui-navigate-right">
	     		<div class="title"><strong class="c0a">今日活跃</strong></div>
	     		<div class="text ov">
	     			<span class="fl c33">学生/家长:<em class="cf7">150/230</em></span><span class="fr bli cf7">0.73</span>
	     		</div>
	     		<div class="title yesterday"><strong class="c0a">昨日活跃</strong></div>
	     		<div class="text ov">
	     			<span class="fl c33">学生/家长:<em class="cf7">150/230</em></span><span class="fr bli cf7">0.73</span>
	     		</div>
	     		<div class="text ov">
	     			<span class="fl c33">全市最高家长活跃比:</span><span class="fr bli cf7">0.94</span>
	     		</div>
	     	</div>
	     </div>
	   </div>
	   <!--各班活跃情况列表-->
	   <div id="activeClass" class="bff mt8 usageList">
	     <div class="report-title"><strong>各班学生活跃情况</strong></div>
	     <ul class="mui-table-view reportList">
		    <li class="mui-table-view-cell reportLt">
		        <a class="mui-navigate-right">
		        	<div class="num">1</div>
		        	<div class="name">小段1班</div>
		        	<div class="attention">月日均活跃比:<span class="attention-num c0a">0.83</span></div>
		        	<div class="biliNum">今日活跃23/56,活跃比：0.49</div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell reportLt">
		        <a class="mui-navigate-right">
		        	<div class="num">1</div>
		        	<div class="name">小段1班</div>
		        	<div class="attention">月日均活跃比:<span class="attention-num cf7">0.54</span></div>
		        	<div class="biliNum">今日活跃23/56,活跃比：0.49</div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell reportLt">
		        <a class="mui-navigate-right">
		        	<div class="num">1</div>
		        	<div class="name">小段1班</div>
		        	<div class="attention">月日均活跃比:<span class="attention-num cf7">0.54</span></div>
		        	<div class="biliNum">今日活跃23/56,活跃比：0.49</div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell reportNone">
		        <a class="mui-navigate-right">
		        	<div class="num">4</div>
		        	<div class="name">小段1班</div>
		        	<div class="attention">月日均活跃比:<span class="attention-num cf7">0.54</span></div>
		        	<div class="biliNum">今日还没有家长活跃</div>
		        	<button type="button" class="mui-btn mui-btn-primary">提醒</button>
		        </a>
		    </li>
		</ul>
		<div class="photoList-tis">统计数据截止于2018-10-22 23:59:59</div>
		<div class="tix-btn"><button type="button" class="mui-btn mui-btn-primary lh2">提醒老师邀请家长使用</button></div>
	   </div>
	   <!--学生活跃情况列表-->
	   <div id="activeStudent" class="bff mt8 usageList">
	     <div class="report-title"><strong>学生活跃情况</strong></div>
	     <ul class="mui-table-view reportList">
		    <li class="mui-table-view-cell reportLt">
		        <a class="mui-navigate-right">
		        	<div class="num">1</div>
		        	<div class="name">学生名</div>
		        	<div class="attention">月均日活家长:<span class="attention-num">2.12人，</span><span class="attention-today">今日登陆<em class="c00">2人</em></span></div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell reportLt">
		        <a class="mui-navigate-right">
		        	<div class="num">1</div>
		        	<div class="name">学生名</div>
		        	<div class="attention">月均日活家长:<span class="attention-num">1.98人，</span><span class="attention-today">今日<em class="cf7">未登录</em></span></div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell reportLt">
		        <a class="mui-navigate-right">
		        	<div class="num">1</div>
		        	<div class="name">学生名</div>
		        	<div class="attention">月均日活家长:<span class="attention-num">2.12人，</span><span class="attention-today">今日登陆<em class="c00">2人</em></span></div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell reportLt">
		        <a class="mui-navigate-right">
		        	<div class="num">4</div>
		        	<div class="name">学生名</div>
		        	<div class="attention">月均日活家长:<span class="attention-num">1.98人，</span><span class="attention-today">今日<em class="cf7">未登录</em></span></div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell reportNone">
		        <a class="mui-navigate-right">
		        	<div class="num">4</div>
		        	<div class="name">学生名</div>
		        	<div class="attention">未激活</div>
		        	<button type="button" class="mui-btn mui-btn-primary">邀请激活</button>
		        </a>
		    </li>
		</ul>
		
		<div class="tix-btn"><button type="button" class="mui-btn mui-btn-primary lh2">提醒家长登陆</button></div>
	   </div>
       <!--底部按钮-->
	   <!--<div class="btnContent"><button type="button" class="mui-btn mui-btn-primary">提醒家长激活</button></div>-->
	   <!--选择自动提醒时间弹窗-->
	   <div class="tanc-beij btn-close" style="display: none;"></div>
	   <div class="tanc4 tanc tanc-changeWay" style="display: none;">
	     <div class="way-title">选择自动提醒时间</div>
	     <div class="way-content">
	     	<div class="way-text">选择后系统将自动每周五12:00，发送学校各班级关注家长排行情况到教师聊天群</div>
	     	<div class="way-list ov">
	     		<div class="way-lt active" data-num='0'>不提醒</div>
	     		<div class="way-lt" data-num='1'>每周</div>
	     		<div class="way-lt" data-num='2'>每两周</div>
	     	</div>
	     </div>
	     <div class="way-btn">
	     	<button type="button" class="mui-btn mui-btn-primary btn-ok">确定</button>
	     	<button type="button" class="mui-btn btn-close">取消</button>
	     </div>
	   </div>
	   <!--颜色值说明弹窗-->
	   <div class="tanc1 tanc tanc-explain" style="display: none;">
	     <div class="explain-title">不同颜色分别代表的学生激活的不同家长数:</div>
	     <div class="explain-list">
	     	<div><i class="bgreen icon"></i>激活4个及以上家长</div>
	     	<div><i class="bblue icon"></i>激活3个家长</div>
	     	<div><i class="borange icon"></i>激活2个家长</div>
	     	<div><i class="bred icon"></i>激活1个家长</div>
	     	<div><i class="bgray icon"></i>未激活家长</div>
	     </div>
	     <div class="explain-btn">
	     	<button type="button" class="mui-btn mui-btn-primary btn-close">知道了</button>
	     </div>
	   </div>
	   <!--学校活跃情况弹窗-->
	   <div class="tanc2 tanc tanc-schoolActive" style="display: none;">
	     <ul class="mui-table-view">
		    <li class="mui-table-view-cell">
		    	1、本月全市日均活跃排名为自然月学校日均活跃家长比的全市排名。
		    </li>
		    <li class="mui-table-view-cell">
		    	2、活跃比=在读学生的活跃家长数/在读学生数
		    </li>
		    <li class="mui-table-view-cell">
		    	3、全市最高活跃比为学校地址所在市昨日活跃最高的学校的比值
		    </li>
		</ul>
		<button type="button" class="mui-btn mui-btn-primary btn-close">知道了</button>
	   </div>
	   <!--各班家长关注情况弹窗-->
	   <div class="tanc3 tanc tanc-schoolActive" style="display: none;">
	     <ul class="mui-table-view">
		    <li class="mui-table-view-cell">
		    	1、学生平均关注家长数=本校/本班激活的学生家长总数/在读学生数；
		    </li>
		    <li class="mui-table-view-cell">
		    	2、家长激活越多学生平均关注的家长数就越大，排名越高；
		    </li>
		</ul>
		<button type="button" class="mui-btn mui-btn-primary btn-close">知道了</button>
	   </div>
       <script type="text/javascript">
//     	    dataDate=['12/1', '12/2', '12/3', '12/4', '12/5', '12/6', '12/7','12/8', '12/9', '12/10', '12/11', '12/12', '12/13', '12/14','12/15', '12/16', '12/17', '12/18', '12/19', '12/20', '12/21','12/22', '12/23', '12/24', '12/25', '12/26', '12/27', '12/28','12/29','12/30','12/31',];
//     	    dataNum=[20, 50, 30, 40,65, 90, 0,20, 50, 30, 40, 70, 0, 50,20, 85, 30, 40, 85, 0, 70,20, 50, 30, 5, 10, 90, 80, 50, 30, 40];
            var dataDateArr=[];
			var dataNumArr=[];
			var dataCanyArr=[];
            var isblock="";
            dataList=[
              {
              	dateTime:'12/1',
                dataNum:'1.5',
                dataCany:'8'
              },
              {
              	dateTime:'12/2',
                dataNum:'2.0',
                dataCany:'10'
              },
              {
              	dateTime:'12/3',
                dataNum:'0.5',
                dataCany:'3'
              },
              {
              	dateTime:'12/4',
                dataNum:'3.0',
                dataCany:'20'
              },
              {
              	dateTime:'12/5',
                dataNum:'0',
                dataCany:'0'
              },
              {
              	dateTime:'12/6',
                dataNum:'2.0',
                dataCany:'10'
              },
              {
              	dateTime:'12/7',
                dataNum:'2.5',
                dataCany:'15'
              },
              {
              	dateTime:'12/8',
                dataNum:'1.8',
                dataCany:'13'
              },
              {
              	dateTime:'12/9',
                dataNum:'1.6',
                dataCany:'16'
              },
              {
              	dateTime:'12/10',
                dataNum:'1.0',
                dataCany:'15'
              },{
              	dateTime:'12/11',
                dataNum:'15',
                dataCany:'8'
              },
              {
              	dateTime:'12/12',
                dataNum:'2.0',
                dataCany:'10'
              },
              {
              	dateTime:'12/13',
                dataNum:'0.5',
                dataCany:'3'
              },
              {
              	dateTime:'12/14',
                dataNum:'3.0',
                dataCany:'20'
              },
              {
              	dateTime:'12/15',
                dataNum:'0',
                dataCany:'0'
              },
              {
              	dateTime:'12/16',
                dataNum:'2.0',
                dataCany:'10'
              },
              {
              	dateTime:'12/17',
                dataNum:'2.5',
                dataCany:'15'
              },
              {
              	dateTime:'12/18',
                dataNum:'1.8',
                dataCany:'13'
              },
              {
              	dateTime:'12/19',
                dataNum:'1.6',
                dataCany:'16'
              },
              {
              	dateTime:'12/20',
                dataNum:'1.0',
                dataCany:'15'
              },{
              	dateTime:'12/21',
                dataNum:'1.5',
                dataCany:'8'
              },
              {
              	dateTime:'12/22',
                dataNum:'2.0',
                dataCany:'10'
              },
              {
              	dateTime:'12/23',
                dataNum:'0.5',
                dataCany:'3'
              },
              {
              	dateTime:'12/24',
                dataNum:'3.0',
                dataCany:'20'
              },
              {
              	dateTime:'12/25',
                dataNum:'0',
                dataCany:'0'
              },
              {
              	dateTime:'12/26',
                dataNum:'1.5',
                dataCany:'10'
              },
              {
              	dateTime:'12/27',
                dataNum:'2.5',
                dataCany:'999999'
              },
              {
              	dateTime:'12/28',
                dataNum:'1.8',
                dataCany:'13'
              },
              {
              	dateTime:'12/29',
                dataNum:'1.6',
                dataCany:'16'
              },
              {
              	dateTime:'12/30',
                dataNum:'1.0',
                dataCany:'15'
              },
              {
              	dateTime:'12/31',
                dataNum:'2.0',
                dataCany:'200005'
              }
            ];
            dataList.forEach((val)=>{
            	dataDateArr.push(val.dateTime);
            	dataNumArr.push(val.dataNum);
            	dataCanyArr.push(val.dataCany)
            })
//          console.log(dataDateArr)
//          console.log(dataNumArr)
			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var totalNum=32;
			var canyNum=0;
			var app = {};
			option = null;
			option = {
				type: Object,
				tooltip: {
					show:true,
			        trigger: 'axis',
			        formatter: function(params){
			        	canyNum=parseInt((params[0].data)*totalNum/100);
			        	return "<div style='border: none;'><div>活跃率："+params[0].data+"%</div><div style='margin-top:-3px'>活跃家长人数："+dataCanyArr[params[0].dataIndex]+"人</div></div>"
			        },
			        confine: true,
			        triggerOn: 'click',
			        axisPointer: {
			        	show:false,
			            type: 'line',
//			            axis:'x',
			            snap:true,
			            lineStyle:{
			            	color:'#fff',
			            	type: 'dashed',
			            	width: 0,
			            	opacity: 0
			            },
			            label:{
			            	show:false
			            },
			            crossStyle:{
			            	color: '#999',
			            },
			            triggerOn:'click',
			        },
			        textStyle:{
			        	fontSize: 13
			        },
			        showContent: false,
			        enterable: true,
//			        formatter: '活跃率: {c0}%<br />活跃家长人数: {b0}'
			    },
			    color: ['#8EC9EB'],
			    legend: {
			    	type:'scroll',
			        data:[{name:'每日活跃情况',icon:'circle'}],
			        left:'center',
			        bottom:8,
			        textStyle:{
			        	color:'#333'
			        },
			        selectedMode:false
			    },
			    dataZoom: [{
		            type: 'inside',
		            zoomLock: true,
		            startValue:this.dataDateArr.length-7,
		            endValue:this.dataDateArr.length-1
		        }],
			    grid: {
	                left: '6%',
					right: '10%',
					bottom: '12%',
					top: '23%',
	                containLabel: true
	            },
			    xAxis: {
				    type: 'category',
				    boundaryGap: false,
					triggerEvent: true,
				    data: dataDateArr,
				    interval:0,
				    triggerEvent: true,
				    axisLine:{
				    	show:false,
				    	lineStyle:{
				    		color: '#ccc'
				    	}
				    },
				    axisTick:{
				    	alignWithLabel:true,
				    	show:false
				    },
				    axisLabel:{
				    	interval:0,
				    	color:'#818D9D',
//				    	fontSize: 13,
				    },
				    splitLine: {
			            show: false,
			            lineStyle:{
			                 color: ['#ccc'],
			                 width: 1,
			                type: 'dashed'
			            }
			        }
				  
			    },
				yAxis: {
				    type: 'value',
				    offset:10,
				    axisLine:{
				    	show:false,
				    	lineStyle:{
				    		color: '#808c9a'
				    	}
				    },
				    axisTick:{
				    	show:false
				    },
				    axisLabel:{
//				    	formatter:function(params){return params ? params + "%" : ''}
				    	color:'#818D9D'
				    },
				    splitLine: {
			            show: true,
			            lineStyle:{
			                 color: ['#ededed'],
			                 width: 1,
			                type: 'dashed'
			            }
			        }
				},
				//
				series: [{
						silent: true,
						name: '每日活跃情况',
						type: 'line',
						showSymbol: false,
						smooth: true,
						symbolSize: [8, 8], // 设定实心点的大小
						sampling: 'average',
						symbol:'image://images/icon_title.png',
						itemStyle: {
							normal: {
								color: 'rgba(0,170,255,1)'
							},
						},
						emphasis: {
							color:'rgba(252,174,73,1)',
							label:{
					    		show:true,
					    		position:'top',
					    		color: '#fcae49',
					    		backgroundColor:'rgba(255,255,255,1)',
					    		borderColor:'#fcae49',
					    		borderWidth: 1,
					    		padding:4,
					    		align:'center',
					    		borderRadius:5,
	                            formatter:function(params){
	                            	var value=params.value;
	                            	var index=params.dataIndex;
	                            	var cyNum=parseInt(dataCanyArr[index]);
	                            	return "活跃比:"+value+"\n活跃家长数:\n"+cyNum+"人"
	                            },
	                            rich: {
									ranStyle: {
										color: '#fcae49',
										align: 'center'
									}
								},
	                            textStyle: {
									lineHeight:15,
								}
					        },
						},
						areaStyle: {
			                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			                    offset: 0,
			                    color: 'rgb(201,236,255)'
			                }, {
			                    offset: 1,
			                    color: 'rgb(255,255,255)'
			                }])
			            },
						data:dataNumArr
					}]
			};
			
			if (option && typeof option === "object") {
			    myChart.setOption(option, true);
			};
       </script>
	</body>
</html>
